{% extends 'core/base.html' %}
{% block content %}
<div class="article-list-container">
    <h2>宣传文章</h2>

    <div class="articles-grid">
        {% for article in articles %}
            <div class="article-card">
                {% if article.image %}
                    <div class="article-image">
                        <img src="{{ article.image.url }}" alt="{{ article.title }}">
                    </div>
                {% endif %}
                <div class="article-content">
                    <h3 class="article-title">
                        <a href="{% url 'article_detail' article.id %}">{{ article.title }}</a>
                    </h3>
                    <div class="article-meta">
                        <span class="meta-item category">
                            <span class="meta-icon">📂</span> {{ article.category }}
                        </span>
                        <span class="meta-item author">
                            <span class="meta-icon">👤</span> {{ article.author }}
                        </span>
                        <span class="meta-item date">
                            <span class="meta-icon">📅</span> {{ article.created_at|date:"Y-m-d H:i" }}
                        </span>
                    </div>
                    <p class="article-excerpt">{{ article.content|truncatewords:30 }}</p>
                    <a href="{% url 'article_detail' article.id %}" class="read-more">
                        阅读全文 <span class="arrow">→</span>
                    </a>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<style>
    .article-list-container {
        max-width: 1000px;
        margin: 0 auto;
    }

    .articles-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 25px;
        margin-top: 2rem;
    }

    .article-card {
        background-color: white;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 3px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s, box-shadow 0.3s;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .article-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }

    .article-image {
        height: 200px;
        overflow: hidden;
    }

    .article-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s;
    }

    .article-card:hover .article-image img {
        transform: scale(1.05);
    }

    .article-content {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .article-title {
        margin-top: 0;
        margin-bottom: 1rem;
        font-size: 1.3rem;
    }

    .article-title a {
        color: var(--primary-dark);
        text-decoration: none;
    }

    .article-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 1rem;
        font-size: 0.85rem;
        color: var(--text-light);
    }

    .meta-item {
        display: flex;
        align-items: center;
    }

    .meta-icon {
        margin-right: 5px;
    }

    .article-excerpt {
        color: var(--text);
        margin-bottom: 1.5rem;
        flex-grow: 1;
    }

    .read-more {
        align-self: flex-start;
        color: var(--primary);
        font-weight: 500;
        text-decoration: none;
        display: flex;
        align-items: center;
        margin-top: auto;
    }

    .arrow {
        margin-left: 5px;
        transition: transform 0.3s;
    }

    .read-more:hover .arrow {
        transform: translateX(5px);
    }

    @media (max-width: 768px) {
        .articles-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}